<template>
  <div id="OO1">
    <div id="OO7">
      <div id="OO8">
        <div id="wuzi_header">
          <h1>疫情物资播拨放单</h1>
        </div>
        <div class="wuzi_main_1">
          <div class="wuzi_1">物<br />资<br />接<br />收<br />单<br />位</div>
          <div class="wuzi_2">
            物资接收医院：{{ this.$route.query.ALL.name }}
          </div>
          <div class="wuzi_2">
            物资接收医院地址：{{this.$route.query.ALL.pca[0] }}{{this.$route.query.ALL.pca[1] }}{{this.$route.query.ALL.pca[2]}}{{ this.$route.query.ALL.adress }}
          </div>
          <div class="wuzi_2">
            物资接收负责人：{{ this.$route.query.ALL.inputperson }}
          </div>
          <div class="wuzi_2">
            物资接收人联系方式：{{ this.$route.query.ALL.inputIphone }}
          </div>
        </div>
        <div id="wuzi_main_3">
          <table border="0" cellspacing="0" width="580px">
            <tr>
              <th colspan="2">物资类型</th>
              <th>规格</th>
              <th>数量</th>
              <th>单位</th>
            </tr>
            <tr>
              <td colspan="2">口罩</td>
              <td>通用</td>
              <td>{{ this.$route.query.ALL.mask }}</td>
              <td>个</td>
            </tr>
            <tr>
              <td colspan="2">防护服</td>
              <td>通用</td>
              <td>{{ this.$route.query.ALL.cloth }}</td>
              <td>个</td>
            </tr>
            <tr>
              <td colspan="2">呼吸机</td>
              <td>通用</td>
              <td>{{ this.$route.query.ALL.breath }}</td>
              <td>个</td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
        <div class="wuzi_main_2">
          <div class="wuzi_1" style="border-top: 1px solid black">
            物<br />资<br />拨<br />放<br />单<br />位
          </div>
          <div class="wuzi_2" style="border-top: 1px solid black">
            物资拨放地点：{{ this.$route.query.ALL.ouputadress }}
          </div>
          <div class="wuzi_2">物资拨放：口罩 防护服 呼吸机</div>
          <div class="wuzi_2">
            备注：物资发往地为
            {{ this.$route.query.ALL.position }}，请做好安全防护
          </div>
          <div class="wuzi_2"></div>
          <div id="BTNN"><el-button type="primary" round @click="tomap">确定</el-button></div>
          
        </div>
      </div>
      <div id="OO9">
        <div class="circle"></div>
        <div class="circle equator"></div>
        <div class="circle equator2"></div>
        <div class="circle equator3"></div>
        <div class="circle weft1"></div>
        <div class="circle weft2"></div>
        <div class="circle weft3"></div>
        <div class="circle weft3"></div>
        <div class="where_in">
          <p>急 速 支 援</p>
        </div>
        <div class="where_in2">
          <p>分 秒 必 争</p>
        </div>
        <div class="circle weft4"></div>
        <div class="circle weft5"></div>
        <div class="circle weft6"></div>
        <div class="circle weft7"></div>
        <div class="circle weft8"></div>
        <div class="circle weft9"></div>
        <div class="circle weft10"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    tomap() {
        this.$router.push({
        path: "/wuzi/index",
      });
    },
  },
  created() {
    console.log(this.$route.query.ALL);
  },
};
</script>
<style scoped>
#OO1 {
  position: relative;
  /* background-image: linear-gradient(#e66465, #9198e5); */

  background-image: url("./1.jpg");
  background-size: 100% 110%;
  height: 670px;
  border-radius: 5px;
  background-color: red; /* 浏览器不支持时显示 */
}
#OO7 {
  position: relative;
  /* background-color: #1568; */
  width: 600px;
  height: 670px;
  border-radius: 5px;
}
#OO8 {
  position: absolute;
  margin-left: 10px;
  border-radius: 10px;
  /* margin: auto; */
  margin-top: 10px;
  width: 580px;
  height: 650px;
  border: 1px solid black;
  background-color: #fff;
}
/* 头部文件 */
#wuzi_header {
  float: left;
  width: 580px;
  height: 60px;
  text-align: center;
  /* background:#fff; */
  border-bottom: 1px solid black;
}
/* 第一表格 */
.wuzi_main_1 {
  float: left;
}
.wuzi_main_2 {
  float: left;
  margin-top: -45px;
}
#BTNN{
  margin-top: 10px;
  margin-right: 30px;
  float: right;
}
.wuzi_1 {
  float: left;
  padding-top: 5px;
  text-align: center;
  width: 30px;
  height: 120px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
.wuzi_2 {
  float: left;
  position: relative;
  width: 548px;
  height: 30px;
  line-height: 33px;
  text-indent: 1em;
  border-bottom: 1px solid black;
}
/* 第二表格数据 */
#wuzi_main_3 {
  float: left;
  margin-top: 3px;
  height: 300px;
  width: 580px;
  /* background-color: rgb(121, 130, 214); */
}
#wuzi_main_3 table {
  text-align: center;
}
tr td,
th {
  line-height: 30px;
  height: 30px;
  border: 1px solid black;
}

.where_in {
  color: red;
  font-weight: bolder;
  position: absolute;
  font-size: 30px;
  left: 800px;
  top: 265px;
}

.where_in2 {
  color: red;
  font-weight: bolder;
  position: absolute;
  font-size: 30px;
  left: 930px;
  top: 265px;
}

.circle {
  border-radius: 100%;
  height: 350px;
  width: 350px;
  left: 700px;
  top: 170px;
  position: absolute;
  border: 2px solid rgb(72, 95, 226);
  transform-style: preserve-3d;
}

.equator2 {
  width: 280px;
  left: 735px;
  border: 3px solid rgb(72, 95, 226);
  top: 140px;
  transform: rotateX(80deg) translateZ(70px);
}
.equator {
  border: 3px solid rgb(72, 95, 226);
  top: 230px;
  transform: rotateX(74deg) translateZ(70px);
}
.equator3 {
  width: 300px;
  left: 725px;
  border: 3px solid rgb(72, 95, 226);
  top: 325px;
  transform: rotateX(77deg) translateZ(70px);
}

.weft1 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft1;
}

.weft2 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft2;
}

.weft3 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft3;
}

.weft4 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft4;
}

.weft5 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft5;
}

.weft6 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft6;
}

.weft7 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft7;
}

.weft8 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft8;
}

.weft9 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft9;
}

.weft10 {
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-name: weft10;
}

@-webkit-keyframes weft1 {
  from {
    -webkit-transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
  }
}

@-webkit-keyframes weft2 {
  from {
    -webkit-transform: rotateY(20deg);
  }

  to {
    -webkit-transform: rotateY(380deg);
  }
}

@-webkit-keyframes weft3 {
  from {
    -webkit-transform: rotateY(40deg);
  }

  to {
    -webkit-transform: rotateY(400deg);
  }
}

@-webkit-keyframes weft4 {
  from {
    -webkit-transform: rotateY(60deg);
  }

  to {
    -webkit-transform: rotateY(420deg);
  }
}

@-webkit-keyframes weft5 {
  from {
    -webkit-transform: rotateY(80deg);
  }

  to {
    -webkit-transform: rotateY(440deg);
  }
}

@-webkit-keyframes weft6 {
  from {
    -webkit-transform: rotateY(100deg);
  }

  to {
    -webkit-transform: rotateY(460deg);
  }
}

@-webkit-keyframes weft7 {
  from {
    -webkit-transform: rotateY(120deg);
  }

  to {
    -webkit-transform: rotateY(480deg);
  }
}

@-webkit-keyframes weft8 {
  from {
    -webkit-transform: rotateY(140deg);
  }

  to {
    -webkit-transform: rotateY(500deg);
  }
}

@-webkit-keyframes weft9 {
  from {
    -webkit-transform: rotateY(160deg);
  }

  to {
    -webkit-transform: rotateY(520deg);
  }
}

@-webkit-keyframes weft10 {
  from {
    -webkit-transform: rotateY(180deg);
  }

  to {
    -webkit-transform: rotateY(540deg);
  }
}
</style>